<template>
  <div class="ribao">
    <div class="page-container ">
      <div class="header">
        <div class="img-box"><img src="./image/header-background.png" alt=""></div>
        <div class="date"><span>{{ weekData }}</span></div>
      </div>
      <div class="mybody">
        <div class="main">
          <div class="topIcon">
            <div class="img-box"><img src="./image/main-top.png" alt=""></div>
            <div class="img-box"><img src="./image/main-top.png" alt=""></div>
            <div class="img-box"><img src="./image/main-top.png" alt=""></div>
            <div class="img-box"><img src="./image/main-top.png" alt=""></div>
            <div class="img-box"><img src="./image/main-top.png" alt=""></div>
            <div class="img-box"><img src="./image/main-top.png" alt=""></div>
          </div>
          <div class="shuju">
            <div class="shuju-item"><span>今日留言：</span> <span class="desc">{{ count.today }}条</span></div>
            <div class="shuju-item"><span>今日回复：</span> <span class="desc">{{ count.today2 }}条</span></div>
          </div>
          <div class="main-list">
            <div class="main-item" v-for="(item,idx) in monthNewData" v-if="idx<3">
              <div class="title-wrap">
                <div class="tag-box"><span class="tag">{{ item.askType }}</span></div>
                <div class="title">{{ item.userSimpleTitle }}</div>
              </div>
              <div class="content">
                {{ item.askName }}： {{ item.askSimpleContent }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="left">
          <div>咨询、求助、建言、投诉</div>
          <div>四川上万家党政部门在线回应</div>
          <div class="desc">扫码进入“群众呼声”小程序</div>
        </div>
        <div class="right"><img src="./image/qzhs-logo.png" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Ribao',
  data() {
    return {}
  },
  props: ['monthNewData', 'other', 'count'],
  methods: {},
  computed: {
    weekData() {
      const date = new Date(this.other)
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
      return date.toLocaleDateString('zh-CN', options)
    }
  },
  mounted() {
         console.log(this.monthNewData)
  }
}
</script>
<style lang="less" scoped>
/* 群众呼声日报 */
.ribao {
  .page-container {
    background-color: #e4eaf8;
    width: 780px;
    margin: 0 auto;
  }

  .header {
    width: 100%;
    position: relative;
    padding:0;
  }

  .header .img-box {
    width: 100%;
  }

  .header .img-box img {
    width: 100%;
  }

  .header .date {
    position: absolute;
    top: 47%;
    right: 5%;
    font-size: 22px;
    font-weight: bold;
    color: #d0e9ff;
  }

  .mybody {
    width: 100%;
    margin-top: calc(-30%);
    z-index: 9999;
    position: relative;
    padding: 0 50px;
  }

  .main {
    margin: 0 auto;
    width: 100%;
    min-height: 400px;
    padding-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0px 8px 8px #cbdcf7;
    background-color: #fff;
    position: relative;
  }

  .main .topIcon .img-box {
    position: absolute;
    transform: translateY(-40%);
    width: 26px;
  }

  .main .topIcon .img-box:nth-child(1) {
    left: 15%;
  }

  .main .topIcon .img-box:nth-child(2) {
    left: 25%;
  }

  .main .topIcon .img-box:nth-child(3) {
    left: 35%;
  }

  .main .topIcon .img-box:nth-child(4) {
    right: 15%;
  }

  .main .topIcon .img-box:nth-child(5) {
    right: 25%;
  }

  .main .topIcon .img-box:nth-child(6) {
    right: 35%;
  }

  .main .topIcon .img-box img {
    width: 100%;
  }

  .main .shuju {
    display: flex;
    justify-content: space-around;
    font-size: 26px;
    font-weight: bold;
    margin: 0 12px;
    padding: 50px 0 30px;
    border-bottom: 5px dotted #4b74f5;
  }

  .main .shuju .shuju-item {
    color: #1c61e1;
  }

  .main .shuju .shuju-item .desc {
    color: #ca0202;
  }

  .main-list {
    padding: 10px 20px;
  }

  .main .main-list {
    width: 100%;
  }

  .main .main-item {
    margin-top: 6px;
    width: 100%;
    padding: 0 12px;
  }

  .main .main-item .title-wrap {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }

  .main .main-item .title-wrap .tag-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main .main-item .title-wrap .tag-box .tag {
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    background-color: #ca0202;
    border-radius: 30px;
    padding: 8px 28px;
  }

  .main .main-item .title-wrap .title {
    margin-left: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #1c61e1;
    line-height: 1.6;
    flex: 1;
  }

  .main .main-item .content {
    padding: 13px 18px;
    background-color: #f1f3f8;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.6;
    color: #000;
    margin-top: 10px;
    border-radius: 10px;
    letter-spacing: .5px;
  }

  .footer {
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer .left {
    font-size: 22px;
    line-height: 1.6;
    font-weight: normal;
    color: #1c61e1;
  }

  .footer .desc {
    /*margin-top: 6px;*/
    font-size: 28px;
    font-weight: bold;
    font-style: italic;
    margin: 20px 0;
    color: #2059dc;
  }

  .footer .right {
    width: 160px;
  }

  .footer .right img {
    width: 100%;
  }

}
</style>
